<template>
    <wd-tabs v-model="tab">
        <wd-tab title="列表">
            <view class="content">
                <view class="container">
                    <view style="position: sticky;z-index: 99;top: 40px;background: #f1f1f1">
                        <uni-search-bar placeholder="单位名称/维保人员" radius="100" bgColor="#fff" @confirm="search"
                                        v-model="searchName"/>
                    </view>
                    <view class="padding">
                        <view v-for="data in tableData" :key="data.id" class="card"
                              @click="navigateToPage('/pages/maintenance/particular', data)">
                            <view class="card-header">
                                <view class="title">{{ data.clientName }}</view>
                                <view class="status" :class="data.state === '0' ? 'success' : 'warning'">
                                    {{ data.stateName }}
                                </view>
                            </view>
                            <view class="card-body">
                                <view class="info-row">
                                    <view class="icon-box">
                                        <uni-icons type="calendar" size="24" color="#666"/>
                                    </view>
                                    <text class="info-text">{{ data.dateTime }}</text>
                                </view>
                                <view class="info-row">
                                    <view class="icon-box">
                                        <uni-icons type="home" size="24" color="#666"/>
                                    </view>
                                    <text class="info-text">{{ data.addrName }}</text>
                                </view>
                                <view class="info-row">
                                    <view class="icon-box">
                                        <uni-icons type="info" size="24" color="#666"/>
                                    </view>
                                    <text class="info-text">{{data.information}}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <AddButton @click="navigateToPage('/pages/maintenance/add',null)"/>
                </view>
            </view>
        </wd-tab>
        <wd-tab title="概览">
            <view class="content">
                <view class="container">
                    <view style="position: sticky;z-index: 99;top: 40px;background: #f1f1f1">
                        <uni-search-bar placeholder="单位名称/维保地址" radius="100" bgColor="#fff" @confirm="search"
                                        v-model="searchAddr"/>
                    </view>
                    <view class="custom-table">
                        <!-- 表头 -->
                        <view class="table-header">
                            <view class="header-cell" style="width: 45%;">单位名称</view>
                            <view class="header-cell" style="width: 45%;">地址名称</view>
                            <view class="header-cell" style="width: 10%;">次数</view>
                        </view>

                        <!-- 表格内容 -->
                        <view class="table-body">
                            <view
                                    v-for="(item, index) in countData"
                                    :key="index"
                                    class="table-row"
                                    :class="{ 'even-row': index % 2 === 0, 'odd-row': index % 2 === 1 }"
                            >
                                <view class="table-cell wrap-cell" style="width: 45%;">{{ item.clientName || '--' }}
                                </view>
                                <view class="table-cell wrap-cell" style="width: 45%;">{{ item.addrName || '--' }}
                                </view>
                                <view class="table-cell wrap-cell" style="width: 10%;">{{ item.count || 0 }}</view>
                            </view>
                        </view>

                        <!-- 空数据提示 -->
                        <view v-if="countData.length === 0" class="empty-data">
                            暂无数据
                        </view>
                    </view>
                </view>
            </view>
        </wd-tab>
    </wd-tabs>
</template>

<script>
    import AddButton from '@/common/component/AddButton.vue';
    import request from '@/util/request';

    export default {
        components: {
            AddButton
        },
        data() {
            return {
                tab: 1,
                tableData: [],
                countData: [],
                searchName: '',
                searchAddr: '',
                pageNum: 1,
                pageSize: 10,
                countNum: 1,
                countSize: 10,
                total: '',
                countTotal: '',
            }
        },
        mounted() {
            this.load();
            this.loadCount();
        },
        onPullDownRefresh() {
            if (this.tab == 0) {
                this.pageNum = 1;
                this.pageSize = 10;
                this.load()
                uni.stopPullDownRefresh();
            } else {
                this.countNum = 1;
                this.countSize = 10;
                this.loadCount()
                uni.stopPullDownRefresh();
            }
        },
        onReachBottom() { //触底事件
            if(this.tab == 0) {
                if (this.pageNum * this.pageSize >= this.total) {
                    uni.showToast({
                        title: '没有更多数据了',
                        icon: 'none',
                        duration: 1000
                    });
                } else {
                    uni.showLoading({
                        title: '加载中'
                    });
                    this.pageSize += 10
                    this.load()
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 500)
                }
            } else {
                if (this.countNum * this.countSize >= this.countTotal) {
                    uni.showToast({
                        title: '没有更多数据了',
                        icon: 'none',
                        duration: 1000
                    });
                } else {
                    uni.showLoading({
                        title: '加载中'
                    });
                    this.countSize += 10
                    this.loadCount()
                    setTimeout(() => {
                        uni.hideLoading()
                    }, 500)
                }
            }
        },
        methods: {
            changeTab(index) {
                this.currentTab = index;
            },
            search(res) {
                if (this.tab == 0) {
                    this.load();
                } else {
                    this.loadCount();
                }
            },
            load() {
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                let isAllClient = this.$store.state.userInfo.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = this.$store.state.userInfo.clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/record-maintenance/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&keyWord=" + this.searchName +
                    "&level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.tableData = res.data[key];
                                for (let i = 0; i < this.tableData.length; i++) {
                                    if (this.tableData[i].state === "0") {
                                        this.tableData[i].stateName = "已维保";
                                    } else if (this.tableData[i].state === "1") {
                                        this.tableData[i].stateName = "未维保";
                                    }
                                }
                            } else if (key === "total") {
                                this.total = res.data[key];
                            }
                        }
                    } else {
                        uni.showToast({
                            title: "失败",
                            icon: 'error',
                            duration: 2000
                        });
                    }
                })
            },
            loadCount() {
                let level = this.$store.state.userInfo.level;
                let organizationId = this.$store.state.userInfo.organization;
                let isAllClient = this.$store.state.userInfo.isAllClient;
                let clientIds;
                if (isAllClient === "1") {
                    clientIds = this.$store.state.userInfo.clientIds;
                } else {
                    clientIds = [];
                }
                request.get("/record-maintenance/findMaCountGroupByAddr?pageNum=" + this.countNum + "&pageSize=" + this.countSize + "&keyWord=" + this.searchAddr +
                    "&level=" + level + "&organizationId=" + organizationId + "&isAllClient=" + isAllClient + "&clientIds=" + clientIds).then(res => {
                    if (res.code === '200') {
                        for (let key in res.data) {
                            if (key === "record") {
                                this.countData = res.data[key];
                            } else if (key === "total") {
                                this.countTotal = res.data[key];
                            }
                        }
                    } else {
                        uni.showToast({
                            title: "失败",
                            icon: 'error',
                            duration: 2000
                        });
                    }
                })
            },
            navigateToPage(url, item) {
                if (item !== null) {
                    uni.navigateTo({
                        url: url + "?maintenance=" + JSON.stringify(item),
                    });
                } else {
                    uni.navigateTo({
                        url: url,
                    });
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import url("../../common/globleCSS/card.css");
    .content {
        background-color: var(--bg-color);
    }

    .container {
        padding: 20 rpx;
    }

    :deep(.is-active) {
        color: var(--blue-color);
    }

    :deep(.wd-tabs__nav){
        position: sticky;
        z-index: 90;
        top: 0;
    }
    :deep(.wd-tabs__container){
        overflow: visible;
    }
    :deep(.wd-tabs__line) {
        width: 20%;
        background: var(--blue-color);
    }

    .radius1 {
        radius: 25
    }

    .status {
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
    }

    .success {
        background-color: #52c41a;
    }

    .warning {
        background-color: #fa541c;
    }

    /* 自定义表格样式 */
    .custom-table {
        margin: 0 10px;
        border: 1px solid #e8e8e8;
        border-radius: 8rpx;
        overflow: hidden;
        background-color: #fff;
    }

    .table-header {
        display: flex;
        background-color: #fafafa;
        border-bottom: 1px solid #e8e8e8;
    }

    .header-cell {
        padding: 24rpx 16rpx;
        font-weight: bold;
        text-align: center;
        color: #333;
        font-size: 28rpx;
        border-right: 1px solid #e8e8e8;

        &:last-child {
            border-right: none;
        }
    }

    .table-body {
        background-color: #fff;
    }

    .table-row {
        display: flex;
        border-bottom: 1px solid #e8e8e8;

        &:last-child {
            border-bottom: none;
        }
    }

    .even-row {
        background-color: #fff;
    }

    .odd-row {
        background-color: #fafafa;
    }

    .table-cell {
        padding: 24rpx 16rpx;
        text-align: center;
        font-size: 26rpx;
        color: #333;
        border-right: 1px solid #e8e8e8;

        &:last-child {
            border-right: none;
        }
    }

    /* 换行单元格样式 */
    .wrap-cell {
        word-break: break-all;
        white-space: normal;
        line-height: 1.4;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 空数据提示 */
    .empty-data {
        padding: 60rpx 0;
        text-align: center;
        color: #999;
        font-size: 28rpx;
    }
</style>
